// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";

// 引入组件
import About from '../pages/About.vue';
import Home from '../pages/Home.vue';
import News from '../pages/News.vue';
import Message from '../pages/Message.vue';
import Detail from '../pages/Detail.vue';

// VueRouter可以作为构造函数进行使用
// 创建一个路由器
const router = new VueRouter({
    // 路由器的两种工作模式，默认是hash
    mode: 'history',
    // 其中路由器是对一堆路由的管理，而路由对应的就是请求路径和组件
    routes: [
        // 一级路由
        {
            name: 'about',// 命名路由，就是给路由起名称
            path: '/about',
            component: About, // About组件
            meta: { // 路由元信息，就是程序员自定义的信息
                isAuth: true,
                title: '关于'
            }
        },
        {
            name: 'home',
            path: '/home',
            component: Home, // Home组件
            meta: { // 路由元信息，就是程序员自定义的信息
                isAuth: false,
                title: '主页'
            },
            // 二级路由
            children: [
                {
                    name: 'news',
                    // 二级路由不必再写请求路径/，底层会默认帮忙写上的
                    path: 'news',
                    component: News,
                    meta: { // 路由元信息，就是程序员自定义的信息
                        isAuth: true,
                        title: '新闻'
                    },
                    // 重点：独享路由守卫，顾名思义，就是某一个路由单独享用的路由守卫。
                    // 独享路由守卫仅仅只有前置，没有后置独享路由守卫。
                    beforeEnter: (to, from, next) => {
                        // 如果前端点击news导航，引起路径的变化，随后前端路由器检测到，检查到之后，
                        // 就进入到这个配置里面，进行规则的对比，那么在进入之前就会调用beforeEnter独享路由守卫。

                        // 可以根据数据元信息进行判断，因为如果path或者name太多无法全部进行判断
                        if (to.meta.isAuth) { // 判断是否需要进行鉴权
                            // 如果满足一定的条件就放行，否则就不放行
                            if (localStorage.getItem('school') === 'atguigu2') {
                                // // 设置浏览器的头部名称
                                // document.title = to.meta.title || '尚硅谷后端管理系统';
                                next();
                            } else {
                                console.log('您没有权限查看！！');
                            }
                        } else {
                            // // 设置浏览器的头部名称
                            // document.title = to.meta.title || '尚硅谷后端管理系统';
                            next();
                        }
                    }
                },
                {
                    name: 'message',
                    path: 'message',
                    component: Message,
                    meta: { // 路由元信息，就是程序员自定义的信息
                        isAuth: true,
                        title: '消息'
                    },
                    // 三级路由
                    children: [
                        {
                            name: 'detail',// 命名路由，就是给路由起名称
                            path: 'detail/:id/:title',
                            component: Detail,
                            meta: { // 路由元信息，就是程序员自定义的信息
                                isAuth: false,
                                title: '详情'
                            },

                            // // 1、props的第一种写法，值为对象。使用少，因为传递的是死数据。
                            // // 该对象中的所有key-valye都会以props 的形式传给Detail组件（写在此处用在此处）。
                            // props: {
                            //     name: '张三',
                            //     age: 18,
                            // }

                            // // 2、props的第二种写法，值为布尔值
                            // // 若布尔值为真的话，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件
                            // props: true,

                            // 3、props的第三种写法，值为函数
                            // 函数返回值必须是对象，且该函数返回值，是将所有的key-value也会以props的形式传递给Detail组件
                            // props: function ($route) { // 该函数是一个回调函数，我们定义的，但是我们不调用，最终执行了，vue-router调用的
                            //     return {
                            //         id: $route.params.id,
                            //         title: $route.params.title,
                            //     }
                            // },

                            // // 也可以使用解构赋值形式
                            // props: function ({params}) { // 该函数是一个回调函数，我们定义的，但是我们不调用，最终执行了，vue-router调用的
                            //     return {
                            //         id: params.id,
                            //         title: params.title,
                            //     }
                            // },

                            // 也可以使用解构赋值形式连续写法
                            props: function ({ params: { id, title } }) { // 该函数是一个回调函数，我们定义的，但是我们不调用，最终执行了，vue-router调用的
                                return {
                                    id: id,
                                    title: title,
                                }
                            },

                        }
                    ]
                }
            ]
        }
    ]
});

// 重点：beforeEach全局前置路由守卫，初始化的时候被调用、每次路由切换之前被调用
// 获取到router之后，开始进行路由守卫
// beforeEach代表了在每一次路由切换之前，就执行该函数的逻辑
// router.beforeEach((to, from, next) => {
//     console.log('每次切换之前就要调用该方法！');
//     // 参数一to： 代表了到哪里去
//     // 参数二from： 代表了从哪里来
//     // 参数三next： 代表了执行下一个
//     console.log('beforeEach 前置路由守卫', to, from);

//     // // 放行，接着向下走
//     // next();

//     // 可以根据path进行判断，也可以根据名称进行判断
//     // if (to.path === '/home/news' || to.path === '/home/message') {
//     //     // 如果满足一定的条件就放行，否则就不放行
//     //     if (localStorage.getItem('school') === 'atguigu2') {
//     //         next();
//     //     }else {
//     //         console.log('您没有权限查看！！');
//     //     }
//     // } else {
//     //     next();
//     // }

//     // // 可以根据name名称进行判断
//     // if (to.name === 'news' || to.name === 'message') {
//     //     // 如果满足一定的条件就放行，否则就不放行
//     //     if (localStorage.getItem('school') === 'atguigu2') {
//     //         next();
//     //     } else {
//     //         console.log('您没有权限查看！！');
//     //     }
//     // } else {
//     //     next();
//     // }



//     // 可以根据数据元信息进行判断，因为如果path或者name太多无法全部进行判断
//     if (to.meta.isAuth) { // 判断是否需要进行鉴权
//         // 如果满足一定的条件就放行，否则就不放行
//         if (localStorage.getItem('school') === 'atguigu') {
//             // // 设置浏览器的头部名称
//             // document.title = to.meta.title || '尚硅谷后端管理系统';
//             next();
//         } else {
//             console.log('您没有权限查看！！');
//         }
//     } else {
//         // // 设置浏览器的头部名称
//         // document.title = to.meta.title || '尚硅谷后端管理系统';
//         next();
//     }
// });


// 重点：beforeEach全局后置路由守卫，初始化的时候被调用、每次路由切换之后被调用
// router.afterEach((to, from) => {
//     console.log('每次切换之后就要调用该方法！');
//     // 参数一to： 代表了到哪里去
//     // 参数二from： 代表了从哪里来
//     console.log('afterEach 后置路由守卫', to, from);

//     // // 放行，接着向下走
//     // next();
//     // 设置浏览器的头部名称
//     document.title = to.meta.title || '尚硅谷后端管理系统';

// });




// 暴露创建的路由
export default router;